<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="100px" label-position='right' class="app-content" ref="dataForm">
            <div class="box">
                <div class="appTitle">结算明细</div>
                <div class="form-item-title">
                    <span class="title-level">账户信息</span>
                </div>
                <el-row class = "form-line">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="结算日期：">
                                <span>{{dataForm.applyTime || '--'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="1">
                            <el-form-item label="开户名：">
                                <span>{{dataForm.bankAccountName}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="银行卡号：">
                                <span>{{dataForm.bankCardNumber}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="1">
                            <el-form-item label="所属银行：">
                                <span>{{dataForm.affiliatedBank}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="开户行：">
                                <span>{{dataForm.bankOfAccounts}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="1">
                            <el-form-item label="预留手机号：">
                                <span>{{dataForm.phone}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
                
                <el-row class = "form-line">
                    <el-col :span="8">
                        <el-form-item label="结算金额：">
                            <span class="settelColor settelBig">{{dataForm.money}}</span> 元
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item label="结算区间：">
                            <span>{{dataForm.intervalStartTime + ' ~ ' + dataForm.intervalEndTime}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="结算状态：">
                            <span class="settelColor">{{dataForm.status === '1'? '处理中': dataForm.status === '3'? '结算中': dataForm.status === '2' ? '已驳回': dataForm.status === '0'? '已结算': '--'}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14" v-if="dataForm.status=='2'" :offset="1">
                        <el-form-item label="原因：">
                            <span>{{dataForm.sReason || '--'}}</span>
                        </el-form-item>
                    </el-col>    
                </el-row>
            </div>
        </el-form>
        <div class="tableBox">
            <div class="table-title" slot="table-title">
                <div class="table-title-span">结算区间充值明细</div>
                <div class="btnPosition">
                    <el-button  @click="goBack">返回</el-button>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" v-loading="loading" ref="multipleTable" border>

                <el-table-column label="订单号" align="center"  prop="sOrderNum">
                    <template scope = "scope">
                        {{scope.row.sOrderNum || '--'}}
                    </template>
                </el-table-column>
                
                <el-table-column label="充值时间" align="center" prop="sCreateTime" min-width="120">
                    <template scope = "scope">
                        {{scope.row.sCreateTime || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="一卡通卡号" align="center" prop="sCardNumber"></el-table-column>
                
                <el-table-column label="持卡人" align="center" prop="sStudentName">
                    <template scope = "scope">
                        {{scope.row.sStudentName || scope.row.sTeacherName}}
                    </template>
                </el-table-column>

                <el-table-column label="持卡人e学云ID号" prop="sCardholderExueCode" align="center">
                    <template scope = "scope">
                        {{scope.row.sCardholderExueCode || '--'}}
                    </template>
                </el-table-column> 

                <el-table-column label="支付人（用户名）" align="center" prop="sParentName">
                    <template scope = "scope">
                        {{scope.row.sParentName || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="支付人ID" align="center" prop="sPayerExueCode">
                    <template scope = "scope">
                        {{scope.row.sPayerExueCode || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="手机号" align="center" prop="sPhone">
                    <template scope = "scope">
                        {{scope.row.sPhone || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="支付金额（元）" align="center" prop="sMoney">
                    <template scope = "scope">
                        {{scope.row.sMoney.toFixed(2)}}
                    </template>
                </el-table-column>

                <el-table-column label="支付方式" align="center" prop="sPaymentMethod">
                    <template scope = "scope">
                        {{scope.row.sPaymentMethod === '0'? 'e学云余额': scope.row.sPaymentMethod === '1'? '支付宝': scope.row.sPaymentMethod === '2'? '微信':scope.row.sPaymentMethod === '3'? '其他':'--'}}
                    </template>
                </el-table-column>

                <el-table-column label="充值平台" align="center" prop="sPaymentPlatform">
                    <template scope = "scope">
                        {{scope.row.sPaymentPlatform === '0'? 'e学云': scope.row.sPaymentPlatform === '1'? '其他':'--'}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { getSettlementById, pageSettlementDetail } from 'api/oneCardSolution';
import Levelbar from '../layout/Levelbar';
import { mapState, mapActions, mapGetters} from 'vuex';
import TableLayoutes from 'components/TableLayoutes';
export default{
    name: 'checkDetails',
    components: {Levelbar, TableLayoutes},
    data() {
        return {
            pId: '',
            fSchoolId: '',
            dataForm: {
                applyTime: '',
                bankAccountName: '',
                bankCardNumber: '',
                affiliatedBank: '',
                bankOfAccounts: '',
                phone: '',
                money: '',
                intervalStartTime: '',
                intervalEndTime: '',
                status: '',
                reason: ''
            },
            dataApply: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true
        }
        
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'schoolId'
        ])
    },
    created() {
        this.getSettlement()
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },   
        getSettlement() {
            getSettlementById(this.$route.params.id).then((res) => {
                this.dataForm.applyTime = res.data.content.sCreateTime;
                this.dataForm.bankAccountName = res.data.content.sUserRealName;
                this.dataForm.bankCardNumber = res.data.content.sCardNo;
                this.dataForm.affiliatedBank = res.data.content.bankName;
                this.dataForm.bankOfAccounts = res.data.content.sBankDesc;
                this.dataForm.phone = res.data.content.sUserPhone;
                this.dataForm.money = res.data.content.sMoney;
                this.dataForm.intervalStartTime = res.data.content.sBeginTime;
                this.dataForm.intervalEndTime = res.data.content.sEndTime;
                this.dataForm.status = res.data.content.sStatus;
                this.dataForm.sReason = res.data.content.sReason;
            }).then(() => {
                this.searchFetchData();
            });
        },
        goBack() {
            window.history.back();
        },

        // 查询
        searchFetchData() {
            this.loading = true;
            pageSettlementDetail(this.listQuery.page, this.config.pageSize, this.schoolId, this.dataForm.intervalStartTime, this.dataForm.intervalEndTime).then((response) => {
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;   
            });
        }
    
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .tableBox{
        margin-top:22px;
        padding: 0 20px 30px;
        background: #fff;
        box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .table-title{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        .table-title-span {
            flex: 1;
            line-height: 36px;
        }
    }
    .el-form{
        .box{
            padding:0 50px;
        }
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        .appTop{
            padding:60px 0 30px 0px;
            p{
                margin-left:15px;
            }
        }
        .appTop p{
            margin-left:15px;
        }
        .el-form-item{
            margin-top:8px;
        }
        .appTop:before {
            content: '';           
            float: left;
            border-radius: 2px;
            width:4px;height:20px;
            background:#ff5e2c;
            margin-top:1px;
        }
        .addContinue{
            margin-left:60px;
            margin-top:20px
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .box{
            padding:0 50px;
            .form-line{      
                border-bottom: 1px solid #ddd; 
                margin-bottom: 14px;
                // .el-form-item{
                //     margin-top:22px;
                // }      
            }
        }
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
          }
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 60px;
        }
        .settelColor{
            color:#ff5e2c;
        }
        .settelBig{
            font-size:16px;
            font-weight:600;
        }
    }
    
}

</style>